<p>O componente curricular aborda os conhecimentos de desenvolvimento web</p>
<p> de parágrafo.</p>.<b> e </b> aplica o negrito no texto informado entre elas e define um estilo sem significado semântico. Já a tag <strong> e </strong> tem estilo e significado semântico, indica urgência e seriedade quando o texto é lido por leitor de tela. Além de aplicar o negrito.<i> e </i> insere o estilo itálico, sem significado semântico. Já a tag <em> e </em> tem o significado semântico de enfatizar o conteúdo. Quadro: Significados semânticos
| Tag | Tipo | Descrição |
|---|---|---|
<b>conteúdo</b> |
estilo | Formata o texto em negrito. |
<i>conteúdo</i> |
estilo | Formata o texto em itálico. |
<em>conteúdo</em> |
semântico | Efatiza o texto, colocando o texto em itálico. |
<strong>conteúdo</strong> |
semântico | Dá uma importância ao texto, colocando o texto em negrito, indicando urgência e seriedade. |
<mark>conteúdo</mark> |
semântico | Indica relevância. |
<cite>conteúdo</cite> |
semântico | Para citar o nome de um trabalho, tal como um livro, jogo, música. |
<dfn>conteúdo</dfn> |
semântico | Marcar a instância de definição de um termo. |
Fonte: MDN Web Docs (2022?)
<div> e </div> para todas as situações, e criando seus próprios padrões de nomeclaturas através dos atributos id ou class (voltaremos nesse assunto em Propriedades de CSS).<header>...</header>¶<nav>...</nav>¶<section>...</section>¶<article>...</article>¶<aside>...</aside>¶<footer>...</footer>¶Figura 1: Layouts com as disposições diversas das tags HTML semânticas
| Fonte: Autoria própria | Fonte: Autoria própria |
| Unidade | Descrição |
|---|---|
| em* | Relativo ao tamanho da fonte do elemento. |
| ex | Relativo ao x-height da fonte corrente (raro usar). |
| ch | Relativo a família de fontes. Definida com largura (width) de 0. |
| rem* | Relativo ao tamanho da fonte do elemento root . |
| vw | Relativo a 1% do width do viewport. |
| vh | Relativo a 1% da height do viewport. |
| vmin | Relativo a 1% da dimensão menor do viewport. |
| vmax | Relativo a 1% da dimensão maior do viewport. |
| % | Percentual. |
| viewport = tamanho da janela do navegador | |
| se viewport = 50cm wide, 1vw = 0.5cm. |
| Unidade | Descrição | Equivalência |
|---|---|---|
| cm | Centímetros. | |
| mm | Milímetros. | |
| in | Polegadas. | 1in = 96px = 2.54cm |
| px | Pixels. | 1px = 1/96in |
| pt | Pontos. | 1pt = 1/72in |
| valor padrão dos navegadores = 16px | ||
| 1em = 100% = 16px |
16px. <h1>...</h1> até o menor, <h6>...</h6>.| Medida em: Tag |
px | em |
|---|---|---|
<h1> |
32px | 2em |
<h2> |
24px | 1.5em |
<h3> |
20.8px | 1.3em |
<h4> |
16px | 1em |
<h5> |
12.8px | 0.8em |
<h6> |
11.2px | 0.7em |
<!DOCTYPE html>¶<!DOCTYPE html> (não é uma tag) é uma declaração DTD = Document Type Declaration e representa a primeira linha do documento HTML.Exemplo1aExemplo1bExemplo1cExemplo1d.<!--comentário--> são comentários de códigos de HTML.<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="utf-8">
<title> Título da Página </title>
</head>
<body>
... inserir seu conteúdo aqui ...
</body>
</html>
<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title> Título da Página </title>
</head>
<body>
... inserir seu conteúdo aqui ...
</body>
</html>
<!-- HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta charset="utf-8">
<title> Título da Página </title>
</head>
<body>
... inserir seu conteúdo aqui ...
</body>
</html>
<!-- HTML5 em diante -->
<!DOCTYPE html>
<html> <!-- Inicio do HTML -->
<head> <!-- Início do Cabeçalho da Página -->
<meta charset="utf-8"> <!-- Definição do charset a ser utilizado -->
<title> Título da Página </title> <!-- Definição do Título da Página -->
</head>
<body> <!-- Início do Corpo do Documento -->
... inserir seu conteúdo aqui ...
</body> <!-- Fim do Corpo do Documento -->
</html> <!-- Fim do HTML -->
<html>...<html>¶<!DOCTYPE html>
<html> <!-- Inicio do HTML -->
<head>
<meta charset="utf-8">
<title> Título da Página </title>
</head>
<body>
... inserir seu conteúdo aqui ...
</body>
</html> <!-- Fim do HTML -->
<head>...</head>¶<!DOCTYPE html>
<html>
<head> <!-- Início do Cabeçalho da Página -->
<meta charset="utf-8">
<title> Título da Página </title>
</head> <!-- Fim do Cabeçalho da Página -->
<body>
... inserir seu conteúdo aqui ...
</body>
</html>
<meta>¶<head>..</head>. charset="utf-8" de nosso arquivo estamos dizendo ao navegador: quando for ler esse arquivo, use as regras do charset UTF-8.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- Definição do charset a ser utilizado -->
<title> Título da Página </title>
</head>
<body>
... inserir seu conteúdo aqui ...
</body>
</html>
<title>...</title>¶<head>...</head>. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Título da Página </title> <!-- Definição do título da página -->
</head>
<body>
... inserir seu conteúdo aqui ...
</body>
</html>
<link>¶<head>...</head>. <head>...</head>: <style>...</style>. <head>...</head>>, especificar o link para este arquivo. <link rel="stylesheet" href="caminhodoArquivo/nomeArquivo.css">. <link rel="stylesheet" href="caminhodoArquivo/nomeArquivo.css"><!-- Inserindo o arquivo de estilo CSS como externo ao HTML -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Título da Página </title>
<link rel="stylesheet" href="caminhodoArquivo/nomeArquivo.css"> <!--link para o arquivo de formatação com extensão .css-->
</head>
<body>
<!-- Omitido para facilitar o entendimento -->
</body>
</html>
<style> ... Inserir seu código CSS aqui ... </style><!-- Inserindo o arquivo de estilo CSS no próprio HTML -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Título da Página </title>
<style>
... Inserir seu codigo CSS aqui ...
</style>
</head>
<body>
<!-- Omitido para facilitar o entendimento -->
</body>
</html>
<link> com favicon¶<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <!-- Favicon Inserido no Cabeçalho -->
<title> Título da Página </title>
</head>
<body>
<!-- Omitido para facilitar o entendimento -->
</body>
</html>
<body>...</body>¶<script>...</script>¶src.<head>...</head>, porém com a evolução, pode-se ser utilizado no <body>...</body> também.<!DOCTYPE html>
<html>
<head>
<!-- Omitido para facilitar o entendimento -->
</head>
<body>
<h1> Título h1: Seção I. Tamanho: 32px. </h1>
<h2> Título h2: Capítulo I. Tamanho: 24px. </h2>
<h3> Título h3: Título I. Tamanho: 20.8px. </h3>
<h4> Título h4: Subtítulo I. Tamanho: 16px. </h4>
<h5> Título h5: Subtítulo II. Tamanho: 12.8px. </h5>
<h6> Título h6: Subtítulo III. Tamanho: 11.2px. </h6>
</body>
</html>
Figura 2: Exemplos de tags HTML de títulos
| Fonte: Autoria própria |
<p>...</p>: tag de parágrafo¶<!DOCTYPE html>
<html>
<head>
<!-- Omitido para facilitar o entendimento -->
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<p> O Instituto Federal de São Paulo (IFSP) foi fundado inicialmente em 1909, com o nome de Escola de Aprendizes Artífices. Durante seus 100 anos de história, também recebeu os nomes de Escola Técnica Federal de São Paulo (ETFSP) e Centro Federal de Educação Tecnológica de São Paulo (CEFET-SP), sendo reconhecido pela sociedade paulista por sua excelência no ensino público gratuito de qualidade. </p>
<p> Convertido como Instituto pela Lei nº 11.892, o IFSP passou a ter relevância de universidade, destacando-se pela autonomia. Com a mudança, o IFSP passou a destinar 50% das vagas para os cursos técnicos e, no mínimo, 20% das vagas para os cursos de licenciatura, sobretudo nas áreas de Ciências e da Matemática. Complementarmente, continua oferecendo cursos de Formação Inicial e continuada, Tecnologias, Engenharias e Pós-graduação. <p>
<p> O IFSP é organizado em estrutura multicampi e possui aproximadamente 24 mil alunos matriculados nos 38 campi e mais 4 mil alunos nos 19 polos de educação a distância distribuídos pelo estado de São Paulo. </p>
</body>
</html>
Figura 3: Exemplo de uso de tag de parágrafo
| Fonte: Autoria própria |
<div>...</div>: tag de divisão¶class ou id), ou porque eles compartilham valores de atributos, como lang. Ele deve ser utilizado somente quando não tiver outro elemento de semântica (tal como <article> ou <nav>)".<!DOCTYPE html>
<html>
<head>
<!-- Omitido para facilitar o entendimento -->
</head>
<body>
<div> <strong>Divisão 1</strong> <!--- inicio div 1 -->
<h1> IFSP - Bragança Paulista </h1>
<p> O Instituto Federal de São Paulo (IFSP) foi fundado inicialmente em 1909, com o nome de Escola de Aprendizes Artífices. Durante seus 100 anos de história, também recebeu os nomes de Escola Técnica Federal de São Paulo (ETFSP) e Centro Federal de Educação Tecnológica de São Paulo (CEFET-SP), sendo reconhecido pela sociedade paulista por sua excelência no ensino público gratuito de qualidade. </p>
<div> <strong>Divisão 2 - Dentro da Divisão 1</strong> <!--- inicio div 2 -->
<p> Convertido como Instituto pela Lei nº 11.892, o IFSP passou a ter relevância de universidade, destacando-se pela autonomia. Com a mudança, o IFSP passou a destinar 50% das vagas para os cursos técnicos e, no mínimo, 20% das vagas para os cursos de licenciatura, sobretudo nas áreas de Ciências e da Matemática. Complementarmente, continua oferecendo cursos de Formação Inicial e continuada, Tecnologias, Engenharias e Pós-graduação. <p>
<p> O IFSP é organizado em estrutura multicampi e possui aproximadamente 24 mil alunos matriculados nos 38 campi e mais 4 mil alunos nos 19 polos de educação a distância distribuídos pelo estado de São Paulo. </p>
</div> <!--- fim div 2 -->
</div> <!--- fim div 1 -->
</body>
</html>
Figura 4: Exemplo de uso de tag de divisão
| Figura 4: Exemplo de uso de tag de divisão |
|---|
| Fonte: Autoria própria |
<strong>...</strong>: tag de importância | negrito¶<b>...</b> também é utilizada para destacar o texto em negrito, porém, foi substituída pela tag <strong>..</strong> que possui um significado semântico.<!DOCTYPE html>
<html>
<head>
<!-- Omitido para facilitar o entendimento -->
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<p> O Instituto Federal de São Paulo <strong>(IFSP)</strong> foi fundado inicialmente em 1909, com o nome de Escola de Aprendizes Artífices. Durante seus 100 anos de história, também recebeu os nomes de Escola Técnica Federal de São Paulo <strong>(ETFSP)</strong> e Centro Federal de Educação Tecnológica de São Paulo (CEFET-SP), sendo reconhecido pela sociedade paulista por sua excelência no ensino público gratuito de qualidade. </p>
</body>
</html>
Figura 5: Exemplo de uso de tag de importância
| Fonte: Autoria própria |
<em>...</em>: tag de ênfase | itálico¶<i>...</i> também é utilizada para destacar o texto em itálico, porém, foi substituída pela tag <em>...</em> que possui um significado semântico.<!DOCTYPE html>
<html>
<head>
<!-- Omitido para facilitar o entendimento -->
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<p> O Instituto Federal de São Paulo <strong>(IFSP)</strong> foi fundado inicialmente em 1909, com o nome de <em>Escola de Aprendizes Artífices</em>. Durante seus 100 anos de história, também recebeu os nomes de <em>Escola Técnica Federal de São Paulo <strong>(ETFSP)</strong></em> e <em>Centro Federal de Educação Tecnológica de São Paulo</em> <strong>(CEFET-SP)</strong>, sendo reconhecido pela sociedade paulista por sua excelência no ensino público gratuito de qualidade. </p>
</body>
</html>
Figura 6: Exemplo de uso de tag de ênfase
| Fonte: Autoria própria |
<sup>...</sup>: tag para inserir o texto na posição superior à base¶<!DOCTYPE html>
<html>
<head>
<!-- Omitido para facilitar o entendimento -->
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<p> Na matemática, ao efetuarmos o cálculo de um número elevado a outro, representamos este cálculo assim: 10<sup>3</sup>, o que significa que estou elevando o número 10 a 3, sendo a mesma coisa que 10 x 10 x 10. </p>
</body>
</html>
Figura 7: Exemplo de uso de tag para elevar o texto inserido entre as tags de abertura e fechamento
| Fonte: Autoria própria |
<sub>...</sub>: tag para inserir o texto na posição inferior à base¶<!DOCTYPE html>
<html>
<head>
<!-- Omitido para facilitar o entendimento -->
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<p> Na química, o símbolo da água é: H<sub>2</sub>O. </p>
</body>
</html>
Figura 8: Exemplo de uso de tag para inserir o texto indicado entre as tags de abertura e fechamento, na posição abaixo da base
| Fonte: Autoria própria |
<a href="...">...</a>: tag de inserção de hyperlink¶<a href="http://google.com">Site</a> Saída: Site<a href="contatos.html">Página</a>Saída: Página<a href="#detalhes">Elemento</a> Saída: Elemento <a href="maito:paulagiancoli@ifsp.edu.br">Email</a> Saída: Email<!DOCTYPE html>
<html>
<head>
<!-- Omitido para facilitar o entendimento -->
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<p> <a href="https://bra.ifsp.edu.br">IFSP-BRA</a></p>
<p> <a href="mailto:paulagiancoli@ifsp.edu.br">E-mail Profa.</a></p>
<p> <a href="tel:+551133956789">Ligar para</a></p>
</body>
</html>
Figura 9: Exemplo de uso de tag de hyperlink
| Fonte: Autoria própria |
<img src="..." alt="...">: tag de inserção de imagens¶<figure> e <figcaption>".<!DOCTYPE html>
<html>
<head>
<!-- Omitido para facilitar o entendimento -->
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<p> <img src="imagens/logoDWE.jpg" alt="A imagem refere-se ao logo da disciplina DWE."> </p>
</body>
</html>
Figura 10: Exemplo de uso de tag de imagens
| Imagem existe no local indicado | Imagem não localizada, exibe o conteúdo do atributo alt | |
|---|---|---|
| Fonte: Autoria própria | Fonte: Autoria própria |
<figure>...</figure>: tag de inserção de figuras¶<figcaption>...</figcaption>, e é normalmente referido como uma única unidade. <!DOCTYPE html>
<html>
<head>
<!-- Omitido para facilitar o entendimento -->
</head>
<body>
<p>
<h1> IFSP - Bragança Paulista </h1>
<figure>
<img src="imagens/logoDWE.jpg" alt="A imagem refere-se ao logo da disciplina DWE.">
<figcaption>Fig.1 - Logo da Disciplina DWE.</figcaption>
</figure>
</p>
</body>
</html>
Figura 11: Exemplo de uso de tag de figuras
| Fonte: Autoria própria |
<del>...</del> e <ins>...</ins> e <s>...</s>: tag de demarcação de edição, inserção, texto irrelevante e incorreto¶De acordo com MDN Web Docs - <del>, "o elemento HTML <del> (ou Elemento HTML de Texto Excluído) representa uma parte do texto que foi excluída de um documento. Este elemento é (não necessariamente) renderizado pelos navegadores com uma linha entre o texto.".
De acordo com MDN Web Docs - <ins>, normalmente o elemento HTML <del> é utilizado em conjunto com o elemento HTML <ins> (ou Elemento HTML de Texto Incluído) que representa a faixa de texto inserida após a demarcação de exclusão.
De acordo com MDN Web Docs - <s>, "o elemento HTML <s> renderiza um texto tachado ou uma linha cortando o texto. Use o elemento <s> para representar textos que não sejam relevantes ou que não estam corretos. Não é apropriado o uso do <s> para indicar edições no texto; para indicar edições no texto utilize <del> e <ins>, que são elementos mais apropriados".
<!DOCTYPE html>
<html>
<head>
<!-- Omitido para facilitar o entendimento -->
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<p> O Instituto Federal de São Paulo (IFSP) foi fundado inicialmente em 1909, <del>com o nome de Escola de Aprendizes Artífices. Durante seus 100 anos de história, também recebeu os nomes de Escola Técnica Federal de São Paulo (ETFSP)</del> <ins>com o nome de Centro Federal de Educação Tecnológica de São Paulo (CEFET-SP)</ins>, sendo reconhecido pela sociedade paulista por sua excelência no <s>ensino público gratuito de qualidade</s>. </p>
</body>
</html>
Saída:
Figura 12: Exemplo de uso de tag de edição, inserção e irrelevante
| Fonte: Autoria própria |
ADS - HTML5, CSS3, JS.
Modelo e formato elaborado pela profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2022.